<template>
  <div class="paneBody">
    <!-- 索引 -->
    <el-form v-show="showSearch" ref="queryRef" :model="queryParams" :inline="true">
	
      <el-form-item label="会员等级" prop="memberCardId">
        <el-select v-model="queryParams.memberCardId" clearable style="width: 240px">
          <el-option v-for="(m,index) in memberLevelList" :key="index" :label="m.name" :value="m.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderCode">
        <el-input
          v-model="queryParams.orderCode"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="会员姓名" prop="memberName">
        <el-input
          v-model="queryParams.memberName"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="memberTelno">
        <el-input
          v-model="queryParams.memberTelno"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="支付方式" prop="payType">
        <el-select v-model="queryParams.payType">
          <el-option value="-1" label="全部" />
          <el-option value="0" label="扫码" />
          <el-option value="1" label="现金" />
          <el-option value="2" label="微信" />
          <el-option value="3" label="支付宝" />
          <el-option value="4" label="其他" />
          <el-option value="5" label="微信支付" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单支付时间" prop="payTime">
        <el-date-picker
          v-model="payTimeArr"
          type="datetimerange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="订单来源" prop="orderFrom">
        <el-select v-model="queryParams.orderFrom">
          <el-option value="-1" label="全部" />
          <el-option value="0" label="小程序" />
          <el-option value="1" label="后台" />
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="操作员" prop="">
        <el-select><el-option>全部</el-option></el-select>
      </el-form-item>
 -->      
<!--      <el-form-item label="订单状态" prop="status">-->
<!--        <el-select v-model="queryParams.status">-->
<!--          <el-option value="-1" label="全部" />-->
<!--          <el-option value="0" label="待付款" />-->
<!--          <el-option value="1" label="已付款" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
		  
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>  	
    <el-row :gutter="10" class="mb8">
      <el-col :span="20">
        <el-button
            type="warning"
            plain @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row> 
		  
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="index" />
      <el-table-column label="订单编号" prop="orderCode" min-width="150" />
      <el-table-column label="会员姓名" prop="memberName" min-width="120" />
      <el-table-column label="会员卡号" prop="memberCardCode" min-width="120" />
      <el-table-column label="手机号" prop="memberTelno" min-width="120" />
      <el-table-column label="卡片等级" prop="memberCardName" min-widtssh="120" />
      <el-table-column label="充值金额" prop="orderValue" min-width="100" />
      <!-- <el-table-column label="充值合计" prop="" min-width="100" /> -->
      <el-table-column label="账户余额" prop="afterValue" min-width="120" />
      <el-table-column label="订单来源" prop="payTypeStr" min-width="120" />
      <el-table-column label="交易日期" prop="payTime" min-width="120" />
      <el-table-column label="操作员" prop="operatorName" min-width="120" />
      <el-table-column label="备注" prop="remark" min-width="120" />
      <el-table-column label="订单状态" prop="statusStr" min-width="120" fixed="right" />
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
		  
  </div>
		
</template>


<script setup>
import { getRechargeList, memberLevel } from '@/api/ven/index'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
const { proxy } = getCurrentInstance()	
const showSearch = ref(true)
const payTimeArr = ref([])
const tableData = ref([])
const memberLevelList = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const open = ref(false)
const loading = ref(true)
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined
  },
  rules: {
		
  }
})
const { queryParams, form, rules } = toRefs(data)
// 获取列表


onMounted(() => {
  getMemberLevel()
  getList()
})
function handleExport() {
  proxy.download('/systemj/memberOrder/export/recharge', {
    ...queryParams.value
  }, `memberRecharge_${new Date().getTime()}.xlsx`)
}
function getList() {
  if (payTimeArr.value) {
    queryParams.value.payTimeRange = payTimeArr.value.toString()
  }
  getRechargeList(queryParams.value).then(res => {
    loading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}
function getMemberLevel() {
  memberLevel().then(res => {
    memberLevelList.value = res
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  payTimeArr.value = []
  handleQuery()
}

</script>


<style>
</style>
